$(function () {
 let layer = layui.layer
 let form = layui.form
 // 获取数据
 axios({
  method: 'GET',
  url: '/my/article/cates',
  headers: {
   Authorization: localStorage.getItem('token')
  }
 }).then(function (res) {
  if (res.data.status !== 0) {
   return layer.msg(res.data.message)
  }
  let arr = []
  let index = 0
  res.data.data.forEach(function (ele) {
   index++
   arr.push(
    `
 <tr>
 <td>${index}</td>
 <td>${ele.name}</td>
 <td>${ele.alias}</td>
 <td>
  <button type="button" class="layui-btn layui-btn-normal  layui-btn-xs btnEdit" data-id="${ele.Id}">修改</button>
  <button type="button" data-id="${ele.Id} class="layui-btn layui-btn-danger  layui-btn-xs">删除</button>
 </td>
</tr>

 `
   )
  })
  $('tbody').empty().html(arr.join(""))
 })

 // 需求2 : 点击添加分类,弹出弹窗
 let indexAdd = null
 $('#btnAdd').on('click', function () {
  indexAdd = layer.open({
   type: 1,
   title: '在线调试',
   area: ['500px', '300px'],
   content: `
   <form class="layui-form" id="formAdd">
   <!-- 1 -->
   <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
     <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
   </div>
   <!-- 2 -->
   <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
     <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
   </div>
   <!-- 3 -->
   <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
  </form>
   `
  });

 })


 // 需求3 : 添加类别
 $('body').on('submit', "#formAdd", function (e) {
  e.preventDefault()
  axios({
   method: 'POST',
   url: '/my/article/addcates',
   data: $(this).serialize(),
   headers: {
    Authorization: localStorage.getItem('token')
   }
  }).then(function (res) {
   layer.msg('添加成功')
   layer.close(indexAdd)
  })
  // 刷新页面
  // initArtCateList()
 })


 // 需求4 : 点击修改,弹出弹窗
 let indexEdit = null
 $('tbody').on('click', '.btnEdit', function () {
  indexEdit = layer.open({
   type: 1,
   title: '文章修改',
   area: ['500px', '300px'],
   content: `
   <form  lay-filter="formEdit" class="layui-form" id="formEdit">
   <input type="hidden" name="Id">
   <!-- 1 -->
   <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
     <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
   </div>
   <!-- 2 -->
   <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
     <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
   </div>
   <!-- 3 -->
   <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
  </form>
   `
  });
  // 将分类信息显示在弹框中
  let id = $(this).attr('data-id')
  axios({
   method: 'GET',
   url: '/my/article/cates/' + id,
   headers: {
    Authorization: localStorage.getItem('token')
   }
  }).then(res => {
   console.log(res.data)
   form.val('formEdit', res.data.data)
  })

 })


 // 需求5 : 修改类别
 $('body').on('submit', "#formEdit", function (e) {
  e.preventDefault()
  axios({
   method: 'POST',
   url: '/my/article/updatecate',
   data: $(this).serialize(),
   headers: {
    Authorization: localStorage.getItem('token')
   }
  }).then(function (res) {
   layer.msg('修改成功')
   layer.close(indexEdit)
  })
  // 刷新页面
  // initArtCateList()
 })

 // 需求6: 删除
 $('tbody').on('click','.btn-delete',function(){
  let id = $(this).attr('data-id')
// 弹窗
layer.confirm('确认删除吗?',{icon:3,title:'提示',function(){
 axios({
  method:'',
  url:''
 })
}})
 })


})


